<template>
    <div id="body">
        <el-card style="width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>用户统计</span>
                </div>
            </template>
            <div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>学生人数</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ userNums.stuNum }} </span>/人
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>校医人数</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ userNums.drNum }} </span>/人
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>管理员人数</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ userNums.manageNum }} </span>/人
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card style="width: 100%; margin-top: 10px;">
            <template #header>
                <div class="card-header">
                    <span>医疗统计</span>
                </div>
            </template>
            <div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>病历库</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ diagnosisNum }} </span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>疾病库</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ diseaseNum }} </span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>药品库</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ medicineNum }} </span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>资讯库</span>
                                </div>
                            </template>
                            <div>
                                <span style="font-size:xx-large;">{{ essayNum }} </span>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card style="width: 100%; margin-top: 10px;">
            <template #header>
                <div class="card-header">
                    <span>系统环境信息</span>
                </div>
            </template>
            <div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>服务器信息</span>
                                </div>
                            </template>
                            <div>
                                <div>服务器名：<span>{{ systemInfo.osName }}</span></div>
                                <div>系统架构：<span>{{ systemInfo.osArch }}</span></div>
                                <div>IP：<span></span>{{ systemInfo.localIp }}</div>
                                <div>MAC：<span>{{ systemInfo.localHostMac }}</span></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>运行环境</span>
                                </div>
                            </template>
                            <div>
                                <div>JAVA版本：<span>{{ systemInfo.javaVersion }}</span></div>
                                <div>JAVA供应商：<span>{{ systemInfo.javaVendor }}</span></div>
                                <div>JAVA提供网站：<span>{{ systemInfo.javaRul }}</span></div>
                                <div>SqlServer版本：<span>16.0.1000.6</span></div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <template #header>
                                <div class="card-header">
                                    <span>开发人员</span>
                                </div>
                            </template>
                            <div>
                                <div>校园医疗服务管理系统</div>
                                <div>开发者：peng_YuJun</div>
                                <div>邮箱：pengyujun53@163.com<span></span></div>
                                <div>Gitee：https://gitee.com/oh-its-yu-jun<span></span></div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            systemInfo:{},
            userNums:{},
            diagnosisNum: 0,
            diseaseNum: 0,
            medicineNum: 0,
            essayNum: 0
        };
    },
    methods: {
        getSystemInfo(){
            this.request
                .get("/home/getSystemInfo", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.systemInfo = res.data;
                    }
                });
        },
        getUserNum(){
            this.request
                .get("/user/countRole", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.userNums = res.data;
                    }
                });
        },
        getDiagnosisNum(){
            this.request
                .get("/diagnosis/countAll", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.diagnosisNum = res.data;
                    }
                });
        },
        getDiseaseNum(){
            this.request
                .get("/disease/countAll", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.diseaseNum = res.data;
                    }
                });
        },
        getMedicineNum(){
            this.request
                .get("/medicine/countAll", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.medicineNum = res.data;
                    }
                });
        },
        getEssayNum(){
            this.request
                .get("/essay/countAll", {})
                .then((res) => {
                    if (res.code == 200) {
                        this.essayNum = res.data;
                    }
                });
        },
    },
    created() {
        //创建
        this.getSystemInfo();
        this.getUserNum();
        this.getDiagnosisNum();
        this.getDiseaseNum();
        this.getMedicineNum();
        this.getEssayNum();
    },
}
</script>

<style>
#body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>